import React, { Component } from 'react'
import { connect } from 'react-redux'
import { actionCreators } from '../../components/banner/store/index'
import { withRouter } from 'react-router-dom'
import {
  Wrapper,
  ContentWrapper,
  RightWrapper
} from './style'


class NoteCom extends Component {
  constructor(props) {
    super(props)
    this.state = {
      id: this.props.match.params.id
    }
  }

  componentDidMount() {
    if(this.state.id) {
      this.props.getList({
        id: this.state.id
      })
    }
  }

  componentWillUpdate() {
    if(this.props.match.params.id !== this.state.id) {
      this.props.getList({
        id: this.props.match.params.id
      })
      this.setState({
        id: this.props.match.params.id
      })
    }
  }
  // 获取url参数
  // getQueryStr(name)
  // {
  //     var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); 
  //     var r = window.location.search.substr(1).match(reg);
  //     if (r != null && r != undefined) {
  //       return unescape(r[2]);
  //     }
  //     return null;
  // }

  changeStatus(item) {
    // window.location.href="/note?id=" + item.get('id')
    this.props.history.push({
      pathname: '/note/' + item.get('id')
    })
    // this.setState({
    //   id: item.get('id')
    // })
  }

  render() {
    return (
      <div>
        <Wrapper className="clearfix">
          <ContentWrapper>
            <p className="title">{this.props.content.get('title')}</p>
            <div className="content">
              {this.props.content.get('content')}
            </div>
          </ContentWrapper>
          <RightWrapper>
          <p className="title">全部公告</p>
          <ul>
            {
              this.props.allList.size > 0 ? this.props.allList.map(item=> {
                return <li key={item.get('id')} className={item.get('id') == this.state.id ? 'active' : null}>
                  <a href="#" onClick={this.changeStatus.bind(this, item)}>
                    {item.get('title')} <span>{item.get('lastModifyTimeStr')}</span>
                  </a>
                </li>
              }) : ''
            }
          </ul>
        </RightWrapper>
        </Wrapper>
      </div>
    )
  }
}

const mapStatus = (status) => {
  return {
    content: status.getIn(['banner', 'content']),
    allList: status.getIn(['banner', 'allAnnounce'])
  }
}

const mapDispatch = (dispatch) => {
  return {
    getList(params) {
      dispatch(actionCreators.getAnnounceById(params))
    }
  }
}


export default connect(mapStatus, mapDispatch)(withRouter(NoteCom))